<template>
  <div id="app">
    <div class="title">子项目录清单详情信息</div>
    <div class="context">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="24">
            <el-form-item style="margin-right: 60px" label="事项名称：">
              <el-input v-model="formInline.user" placeholder="请输入事项名称"></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 60px" label="基本编译：">
              <el-input v-model="formInline.user" placeholder="请输入基本编译"></el-input>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" style="width: 120px">点击搜索</el-button>
              <el-button type="success" style="width: 120px">批量删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tableBox">
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="selection" width="49"></el-table-column>
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column label="事项类型" width="306">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="address" label="事项名称" width="476" show-overflow-tooltip></el-table-column>

          <el-table-column prop="name" label="行使层级" width="315"></el-table-column>

          <el-table-column prop="name" label="审核状态" width="280"></el-table-column>

          <el-table-column label="操作">
            <template>
              <el-button type="primary" size="mini" @click="subIndex">查询</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        multipleSelection: [],

        checkboxGroup1: ['上海'],
        radio1: '1',
        formInline: {
          user: '',
          region: ''
        },
        visible: false
      };
    },
    methods: {
      subIndex() {
        this.$router.push('/subIndex');
      }
    }
  };
</script>

<style lang="scss">
  #app {
    width: 94%;
    margin: 91px auto;
    background: #fff;
    border-radius: 20px;
    .title {
      font-size: 24px;
      color: #222;
      font-weight: bold;
      padding: 30px 40px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8dfe9;
    }
  }
  @import '../../../assets/css/publicList.scss';
</style>
